    <template>
    <div class="troch" v-cloak>

      <!-- 首页 -->
      <div class="shoes" >

        <!-- 轮播 -->
        <div class="carousel">
          <carousel-component :bannerList="bannerList"></carousel-component>
        </div>

        <!--内容  -->
        <div class="container main">
          <div class="enroll">
            <div class="row ">
              <div class="col-xs-6 col-md-4 barely">
                <div>
                  <p class="bj_img">
                    <img src="../../../static/images/super_zhuce.png" alt="" />
                  </p>
                  <p>已注册买家<span>15628</span>家</p>
                </div>
              </div>
              <div class="col-xs-6 col-md-4 barely">
                <div>
                  <p class="bj_img">
                    <img src="../../../static/images/super_jigou.png" alt="" />
                  </p>
                  <p>已收录机构<span>8</span>家</p>
                </div>
              </div>
              <div class="col-xs-6 col-md-4 barely">
                <div class="noBor">
                  <p class="bj_img">
                    <img src="../../../static/images/super_huodong.png" alt="" />
                  </p>
                  <p>累计举办活动<span>15628</span>场</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 热门服务 -->
          <div class="title">
            ||&nbsp;热门服务
            <a href="#">更多》</a>
          </div>
          <!-- <div class="row">
            <div class="col-xs-6 col-md-4">
              <div class="hot_BJ">
                <div class="hot_top">
                  我要开公司
                </div>
                <div class="hot_NR">
                  <p class="hot_conf">责任有限公司注册</p>
                  <div class="hefreas">
                    <p class="hefreas_img"></p>
                    <p class="hefreas_text">一站式服务</p>
                  </div>
                  <p class="gresds">
                    <span>￥0.01<small>元起</small></span
                    ><a href="#">立即查看</a>
                  </p>
                </div>
                <div class="hot_CONIF clearfix">
                  <div class="hotP">
                    <span class="hot_img"
                      ><img src="../../../static/images/account_icon.png"
                    /></span>
                    <p>
                      <span>代理做账</span><br /><span>核算/记账/报税</span>
                    </p>
                  </div>
                  <div class="hotP">
                    <span class="hot_img"
                      ><img src="../../../static/images/company_icon.png"
                    /></span>
                    <p>
                      <span>公司注册</span><br /><span>责任公司/股份公司</span>
                    </p>
                  </div>
                  <div class="hotP">
                    <span class="hot_img"
                      ><img src="../../../static/images/logo_icon.png"
                    /></span>
                    <p><span>商标注册</span><br /><span> 检索/审查</span></p>
                  </div>
                  <div class="hotP">
                    <span class="hot_img"
                      ><img src="../../../static/images/Consultation_icon.png"
                    /></span>
                    <p><span>创业咨询</span><br /><span>引导你的雄心</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="hot_BJ">
                <div class="hot_top">
                  我要做产品
                </div>
                <div class="hot_NR">
                  <p class="hot_conf">软件著作权</p>
                  <div class="hefreas">
                    <p class="hefreas_img"></p>
                    <p class="hefreas_text">软件基础必备</p>
                  </div>
                  <p class="gresds">
                    <span>￥20<small>元起</small></span
                    ><a href="#">立即查看</a>
                  </p>
                </div>
                <div class="hot_CONIF clearfix">
                  <div class="hotP ">
                    <span class="hot_img"
                      ><img src="../../../static/images/Licence_icon.png"
                    /></span>
                    <p>
                      <span>ICP许可证 </span><br /><span>业务经营许可证</span>
                    </p>
                  </div>
                  <div class="hotP">
                    <span class="hot_img"
                      ><img src="../../../static/images/win_icon.png"
                    /></span>
                    <p>
                      <span>微信服务</span><br /><span>责任公司/股份公司</span>
                    </p>
                  </div>
                  <div class="hotP">
                    <span class="hot_img"
                      ><img src="../../../static/images/net_icon.png"
                    /></span>
                    <p><span>商标注册</span><br /><span> 检索/审查</span></p>
                  </div>
                  <div class="hotP">
                    <span class="hot_img"
                      ><img src="../../../static/images/law_icon.png"
                    /></span>
                    <p><span>创业咨询</span><br /><span>引导你的雄心</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xs-6 col-md-4">
              <div class="hot_BJ">
                <div class="hot_top">
                  我要推广
                </div>
                <div class="hot_NR">
                  <p class="hot_conf">责任有限公司注册</p>
                  <div class="hefreas">
                    <p class="hefreas_img"></p>
                    <p class="hefreas_text">一站式服务</p>
                  </div>
                  <p class="gresds">
                    <span>￥0.01<small>元起</small></span
                    ><a href="#">立即查看</a>
                  </p>
                </div>
                <div class="hot_CONIF">
                  <div class="cinds"><span>短信营销 </span><a>更多》</a></div>
                  <div class="cinds"><span>视频广告 </span><a>更多》</a></div>
                  <div class="cinds"><span>微信推广</span><a>更多》</a></div>
                </div>
              </div>
            </div>
          </div> -->

          <!-- 热门服务第二版 -->
          <div class="hot-service">
            <div class="box-item">
              <img src="../../../static/images/hot_service34.png" alt="">
              <div class="item-text">
                <p class="top">常年法律顾问</p>
                <p>机构(50) 顾问(46) 评价(1)</p>
                <p>参考价格</p>
                <p>20000—80000元</p>
              </div>
            </div>
            <div class="box-item">
              <img src="../../../static/images/hot_service35.png" alt="">
              <div class="item-text">
                <p class="top">常年法律顾问</p>
                <p>机构(50) 顾问(46) 评价(1)</p>
                <p>参考价格</p>
                <p>20000—80000元</p>
              </div>
            </div>
            <div class="box-item">
              <img src="../../../static/images/hot_service36.png" alt="">
              <div class="item-text">
                <p class="top">常年法律顾问</p>
                <p>机构(50) 顾问(46) 评价(1)</p>
                <p>参考价格</p>
                <p>20000—80000元</p>
              </div>
            </div>
            <div class="box-item">
              <img src="../../../static/images/hot_service37.png" alt="">
              <div class="item-text">
                <p class="top">常年法律顾问</p>
                <p>机构(50) 顾问(46) 评价(1)</p>
                <p>参考价格</p>
                <p>20000—80000元</p>
              </div>
            </div>
            <div class="box-item">
              <img src="../../../static/images/hot_service38.png" alt="">
              <div class="item-text">
                <p class="top">常年法律顾问</p>
                <p>机构(50) 顾问(46) 评价(1)</p>
                <p>参考价格</p>
                <p>20000—80000元</p>
              </div>
            </div>
          </div>
          <!-- 品牌机构 -->
          <div class="row">
            <div class="col-xs-12 col-md-8">
              <div>
                <div class="title connds">
                  <span>‖ 品牌机构</span><a href="">更多》</a>
                </div>
                <div class="big_BS clearfix">
                  <div class="brund">
                    <div class="greght" v-for="item in xic">
                      <div class="judes">
                        <p><img src="../../../static/images/breas1.png" alt="" /></p>
                        <h6 class="text-overflow">{{item.cons}}</h6>
                        <p class="gots">
                          <span >{{item.js}}</span
                          ><a>更多》</a>
                        </p>
                        <div class="hueart">
                          <span >访问{{ item.fw }}</span>
                          <span >好评{{ item.hp }}</span>
                          <span >交易{{ item.jy }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xs-6 col-md-4 WH">
              <div class="hot_BJ">
                <div class="ceare">
                  <span>最新评价</span><a href="">更多》</a>
                </div>
                <div v-for="item in pjdatas" class="hrefg">
                  <div class="grefg">
                    <p class="grefg_top text-overflow">{{ item.tel }}：{{ item.gs }}</p>
                    <p class="DT">
                      <span>态度好：{{ item.td }}</span
                      ><span>专业：{{ item.zy }}</span>
                    </p>
                    <p class="DT">
                      <span>实惠：{{ item.sh }}</span
                      ><span>影响：{{ item.yx }}</span>
                    </p>
                    <p>描述：{{ item.text }}</p>
                    <p>评论时间：{{ item.time }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 热门服务商 -->
          <div class="title connds">
            <span>‖ 热门服务商务</span><a href="#">更多》</a>
          </div>

          <div class="row">
            <div class="col-xs-6 col-md-4 surface" v-for="item in  hotdata">
              <div class="hot_BJ">
                <p class="bruder">
                  <button type="button" class="btn btn-danger">知识产权</button>
                </p>
                <div class="hreades">
                  <p><img src="../../../static/images/hot.png" alt="" /></p>
                  <div>
                    <span>{{ item.gs }}</span>
                    <p class="smooth">
                      <span
                        >人气&nbsp;<i>{{ item.rq }}</i></span
                      >
                      <span
                        >速度&nbsp;<i>{{ item.sd }}</i></span
                      >
                      <span
                        >质量&nbsp;<i>{{ item.zl }}</i></span
                      >
                    </p>
                  </div>
                </div>
                <div class="bruns">
                  <h6>中国驰名商标注册服务机构</h6>
                  <button type="button" class="btn btn-primary">
                    立即查看
                  </button>
                </div>
              </div>
            </div>
            <!-- <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> -->
          </div>
          <!--  -->
        </div>

        <!--  -->
      </div>


      <!--  -->


    </div>
</template>

<script>
  import CarouselComponent from '../../views/localPage/CarouselComponent'
export default{
  components:{CarouselComponent},
  data() {
    return{
      bannerList:["../../../static/images/banner.png","../../../static/images/banner.png","../../../static/images/banner.png"],
      // 收起更多状态值
      selectterprise:false,
      selectstage:false,
      selectindustries:false,
      contentStatus: false,
      brandFold: true,
      // 收起更多状态值

      //cur: 0,//导航栏的默认光标

      //选择项默认光标
      indus:0,
      stes:0,
      ters:0,
      sort: 0,
      kongo: 0,
      contact: 0,
      xic: [
        {
          cons: "厦门熙重电子科技有限公司",
          js: "公司专注于智能卡制造/应用技术、生物特征 识别技术、研究",
          fw: "1365",
          hp: "2556",
          jy: "1628"
        },
        {
          cons: "厦门熙重电子科技有限公司",
          js: "公司专注于智能卡制造/应用技术、生物特征 识别技术、研究",
          fw: "1365",
          hp: "2556",
          jy: "1628"
        }
      ],
      pjdatas: [
        {
          tel: "134****145",
          gs: "@熙重电子科技有限公司",
          td: "356",
          zy: "318",
          sh: "246",
          yx: "381",
          text: "服务态度不错，价格优惠，挺专业的，回我很喜欢",
          time: "2019-3-30   11:26:30"
        },
        {
          tel: "134****145",
          gs: "@熙重电子科技有限公司",
          td: "356",
          zy: "318",
          sh: "246",
          yx: "381",
          text: "服务态度不错，价格优惠，挺专业的，回我很喜欢",
          time: "2019-3-30   11:26:30"
        }
      ],
      hotdata: [
        { img: "", gs: "熙重电子科技有限公司", rq: "5.9", sd: "5.0", zl: "5.0" },
        { img: "", gs: "熙重电子科技有限公司", rq: "5.9", sd: "5.0", zl: "5.0" },
        { img: "", gs: "熙重电子科技有限公司", rq: "5.9", sd: "5.0", zl: "5.0" },
        { img: "", gs: "熙重电子科技有限公司", rq: "5.9", sd: "5.0", zl: "5.0" },
        { img: "", gs: "熙重电子科技有限公司", rq: "5.9", sd: "5.0", zl: "5.0" },
        { img: "", gs: "熙重电子科技有限公司", rq: "5.9", sd: "5.0", zl: "5.0" }
      ],
      fielddata: [
        { id: "1", nr: "不限" },
        { id: "2", nr: "财税服务 " },
        { id: "3", nr: "法律服务  " },
        { id: "4", nr: "人力资源" },
        { id: "5", nr: "知识产权 " },
        { id: "6", nr: "供应链服务" },
        { id: "7", nr: "管理咨询" },
        { id: "8", nr: "金融服务" },
        { id: "9", nr: "评估认证" },
        { id: "10", nr: "专业技术" },
        { id: "11", nr: "综合服务" }
      ],
      // 排序
      sortdata: [
        { id: "1", nr: "综合" },
        { id: "2", nr: "人气 " },
        { id: "3", nr: "好评" },
        { id: "4", nr: "服务质量" }
      ],
      mation: [
        {
          hhr: "王振英/ 合伙人、主任会计师",
          rz: "已认证",
          ssjg: "苏州中合会计师事务所（普通合伙）",
          ywcz: "税收筹划及抗诉,内控咨询,新三版财务规范",
          khpj: "★★★★★",
          jy: "19",
          dt: "5",
          zy: "5",
          xy: "5",
          jg: "5"
        },
        {
          hhr: "王振英/ 合伙人、主任会计师",
          rz: "",
          ssjg: "苏州中合会计师事务所（普通合伙）",
          ywcz: "收筹划及抗诉,内控咨询,新三版财务规范",
          khpj: "★★★★★",
          jy: "19",
          dt: "5",
          zy: "5",
          xy: "5",
          jg: "5"
        },
        {
          hhr: "王振英/ 合伙人、主任会计师",
          rz: "",
          ssjg: "苏州中合会计师事务所（普通合伙）",
          ywcz: "收筹划及抗诉,内控咨询,新三版财务规范",
          khpj: "★★★★★",
          jy: "19",
          dt: "5",
          zy: "5",
          xy: "5",
          jg: "5"
        },
        {
          hhr: "王振英/ 合伙人、主任会计师",
          rz: "已认证",
          ssjg: "苏州中合会计师事务所（普通合伙）",
          ywcz: "收筹划及抗诉,内控咨询,新三版财务规范",
          khpj: "★★★★★",
          jy: "19",
          dt: "5",
          zy: "5",
          xy: "5",
          jg: "5"
        }
      ],

      // 业务
      areadata: [
        { id: "1", nr: "不限" },
        { id: "2", nr: "财税服务 " },
        { id: "3", nr: "法律服务  " },
        { id: "4", nr: "人力资源" },
        { id: "5", nr: "知识产权 " },
        { id: "6", nr: "供应链服务" },
        { id: "7", nr: "管理咨询" },
        { id: "8", nr: "金融服务" },
        { id: "9", nr: "评估认证" },
        { id: "10", nr: "专业技术" },
        { id: "11", nr: "综合服务" }
      ],
      // 所属行业
      region: [
        { id: "1", nr: "不限" },
        { id: "2", nr: "人工智能" },
        { id: "3", nr: "生物医药" },
        { id: "4", nr: "纳米技术" },
        { id: "5", nr: "互联网" },
        { id: "6", nr: "与移动互联网" },
        { id: "7", nr: "现代装备与先进制造 " },
        { id: "8", nr: "新能源与节能环保" },
        { id: "9", nr: "评估认证" },
        { id: "10", nr: "专业技术" },
        { id: "11", nr: "综合服务" }
      ],
      // 发展阶段
      development: [
        { id: "1", nr: "不限" },
        { id: "2", nr: "筹建期 " },
        { id: "3", nr: "初创期" },
        { id: "4", nr: "成熟期（上市前）" },
        { id: "5", nr: "成熟期（已上市）" }
      ],
      //企业性质
      devnt: [
        { id: "1", nr: "不限" },
        { id: "2", nr: "外资" },
        { id: "3", nr: "合资" },
        { id: "4", nr: "国企" },
        { id: "5", nr: "民营公司" },
        { id: "6", nr: "上市公司" },
        { id: "7", nr: "创业公司 " },
        { id: "8", nr: "外企代表处" },
        { id: "9", nr: "行政机关/事业单位" }
      ],
      mationdata: [
        {
          hhr: "王振英/ 合伙人、主任会计师",
          rz: "已认证",
          hyjg: "会员机构",
          tel: "0512-62550288",
          address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
          khpj: "★★★★★",
          jy: "19",
          dt: "5",
          zy: "5",
          xy: "5",
          jg: "5"
        },
        {
          hhr: "王振英/ 合伙人、主任会计师",
          rz: "已认证",
          hyjg: "会员机构",
          tel: "0512-62550288",
          address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
          khpj: "★★★★★",
          jy: "19",
          dt: "5",
          zy: "5",
          xy: "5",
          jg: "5"
        },
        {
          hhr: "王振英/ 合伙人、主任会计师",
          rz: "已认证",
          hyjg: "会员机构",
          tel: "0512-62550288",
          address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
          khpj: "★★★★★",
          jy: "19",
          dt: "5",
          zy: "5",
          xy: "5",
          jg: "5"
        },
        {
          hhr: "王振英/ 合伙人、主任会计师",
          rz: "已认证",
          hyjg: "会员机构",
          tel: "0512-62550288",
          address: "江苏省苏州市工业园区若水路388号苏州纳米大学科技园H幢522室",
          khpj: "★★★★★",
          jy: "19",
          dt: "5",
          zy: "5",
          xy: "5",
          jg: "5"
        }
      ],
      aboutDta: [
        { id: 1, title: "超市介绍" },
        { id: 2, title: "会员权益" },
        { id: 3, title: "联系我们" }
      ],
    }
  },
  //方法
   methods: {


    // 导航栏
    getItme: function(item, index) {
      this.cur = index;
      switch(index)
      {
                  case 0:

                  this.$router.push({ path:'/ServiceSupermarket/Home'})
                  break;
                  case 1:

                  this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                  break;
                  case 2:

                    this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                  break;
                  case 3:

                    this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                  break;
                  case 4:

                    this.$router.push({ path:'/ServiceSupermarket/About'})
                  break;
      }
    },
     //写需求
        release_demand(){
            this.$router.push({path:'/ServiceSupermarket/CreateDemand'})
        },
   },
  //计算
  computed:{

  },
  //监视
  watch:{


  },
  //加载
  mounted(){

  },
};
</script>

<style scoped>
.carousel{
  height: 500px;
}
.enroll {
  padding: 15px;
}
.barely {
  background: white;
  text-align: center;
  height: 280px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.barely > div {
  width: 100%;
  height: 200px;
  border-right: 2px solid#00b6ff;
}
.barely .noBor {
  border: none;
}
.barely .bj_img {
  height: 100px;
  /* display: flex;
   justify-content: center;
   align-items: flex-end; */
}
.barely p:last-child {
  font-size: 23px;
}
.barely p:last-child span {
  color: #1a84f9;
}
.main .title {
  font-family: "MicrosoftYaHei";
  margin: 80px 0 40px 0;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
}
.title>a{
  font-size: 16px;
  font-weight: 400;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0;
  color: #1575f9;
  float: right;
  margin-right: 10px;
}
.hot_top {
  background: linear-gradient(to bottom, #2fc0f7, #1677f9);
  color: white;
  height: 72px;
  text-align: center;
  line-height: 72px;
  font-size: 20px;
}
.hot_NR {
  padding: 0 15px 0 15px;
}
.hot_conf {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #000033;
  height: 30px;
  margin-top: 10px;
}
.hefreas {
  position: relative;
  width: 100%;
  height: 70px;
  background-image: url(../../../static/images/firm.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.hefreas .hefreas_img {
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.3;
}
.hefreas .hefreas_text {
  position: absolute;
  left: 30%;
  top: 35px;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 3px;
  color: #ffffff;
}
.gresds {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.gresds span {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  color: #333333;
}
.gresds small {
  font-size: 12px;
  letter-spacing: 0px;
  color: #333333;
}
.gresds a {
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0px;
  color: #1575f9;
}
.gresds a:hover {
  text-decoration: none;
}
.hot_CONIF {
  width: 100%;
  height: 200px;
}
.hot_CONIF .hotP {
  width: 50%;
  border-top: 1px solid #c9c4c4;
  border-left: 1px solid #c9c4c4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  float: left;
}
.hot_CONIF .hotP:first-child,
.hot_CONIF .hotP:nth-child(3) {
  border-left: none;
}
.hot_CONIF .hotP .hot_img {
  width: 34px;
  height: 32px;
  margin-right: 10px;
}
.hot_CONIF .hotP .hot_img img {
  width: 100%;
  height: 100%;
}
.hot_CONIF .hotP p span:first-child {
  width: 81px;
  height: 34px;
  font-family: MicrosoftYaHei;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
}
.hot_CONIF .hotP p span:last-child {
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0px;
  color: #999999;
}
.cinds {
  height: 66px;
  padding: 0 15px 0 15px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cinds span,
.cinds a {
  height: 17px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
}
.connds {
  display: flex;
  justify-content: space-between;
}
.connds a {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #1575f9;
}
.big_BS {
  background: white;
  width: 100%;
  height: 360px;
  padding: 20px;
}
.big_BS .brund>div:first-child{
  border-right: 2px solid #4593fd;
}
.big_BS .greght {
  width: 50%;
  height: 300px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}
.big_BS .greght .judes {
  width: 274px;
}
.big_BS .greght .judes:after {
  contain: "";
  height: 100%;
  width: 2px;
  background-color: #00b6ff;
}
.judes h6 {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #333333;
}
.hueart {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hueart span {
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0px;
  color: #999999;
}
.WH {
  margin-top: 80px;
}
.WH .ceare {
  height: 60px;
  background-image: linear-gradient(0deg, #1575f9 0%, #2fc1f7 100%),
    linear-gradient(#e0e0e0, #e0e0e0);
  background-blend-mode: normal, normal;
  padding: 0 15px 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.WH .ceare span {
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #ffffff;
}
.WH .ceare a {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 24px;
  letter-spacing: 0px;
  color: #ffffff;
}
.hrefg {
  height: 182px;
  border-bottom: 1px solid #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
}
.grefg {
  height: 150px;
}

.grefg p {
  margin: 0;
  color: #666666;
}
.grefg .grefg_top {
  color: #222222;
}
.grefg .DT {
  display: flex;
  justify-content: flex-start;
}
.grefg .DT span {
  display: inline-block;
  width: 100px;
}
/* 热门服务商 */
.bruder {
  text-align: right;
}
.surface{
    margin-bottom: 25px;
}
.bruder button {
  width: 100px;
  height: 42px;
  background-image: linear-gradient(0deg, #ef8200 0%, #fecb01 100%),
    linear-gradient(#e70303, #e70303);
  background-blend-mode: normal, normal;
}
.btn-danger {
  border: none;
}
.hreades {
  margin: 0 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.smooth i{
    font-size: 14px;
	font-weight: normal;
	letter-spacing: 0px;
    color: #ff0000;
    font-style: normal;
}
.bruns {
  width: 100%;
  text-align: center;
  height: 100px;
  line-height: 70px;
}
.bruns h6 {
  height: 15px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 28px;
  letter-spacing: 0px;
  color: #333333;
}

.bruns button {
  font-size: 16px;
  color: #1575f9;
  background-color: #ffffff;
  border-radius: 4px;
  border: solid 1px #1575f9;
}
.bruns .btn-primary:hover {
  background-image: linear-gradient(0deg, #0060ff 0%, #49ceff 100%),
    linear-gradient(#ffffff, #ffffff);
  background-blend-mode: normal, normal;
  border: solid 1px #3095ec;
}
</style>
<style lang="less" scoped>
.hot-service{
  padding: 0 16px;
  height: 626px;
  background: url(../../../static/images/hot_service_bg.png) no-repeat;
  background-size: cover;
  position: relative;
  .box-item{
    position: absolute;
    width: 30%;
    &:first-child{
      left:2%;
      top: 52px;
    }
    &:nth-child(2){
      top: 52px;
      left:35%;
    }
    &:nth-child(3){
      top: 52px;
      right:2%;
    }
    &:nth-child(4){
      top: 257px;
      left:18.5%;
    }
    &:nth-child(5){
      top: 257px;
      right:18.5%;
    }
    img{
      width: 100%;
    }
    .item-text{
        position: absolute;
        top: 35%;
        text-align: center;
        width: 100%;
        opacity: 0;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        -ms-transition: all .4s;
        transition: all .4s;
        &:hover{
          opacity: 1;
        }
        &>p{
          margin-bottom: 3px;
          color: #FFFFFF;
          font-size: 17px;
          &.top{
            font-size: 21px;
            font-weight: bold;
          }
        }
    }
  }
    
}
</style>
